<template>
	<div class="redis-status">
		<div class="status-left">
			<div class="redis-mem" ref="redis-mem"></div>
			<div class="redis-info">
				<header class="redis-info-header">Redis INFO：</header>
				<ul class="redis-info-list">
					<li class="redis-info-detail" v-for="item in redisInfo">
						<div class="redis-info-key">{{item.key}}</div>
						<div class="redis-info-value">{{item.value}}</div>
					</li>
				</ul>
			</div>
		</div>
		<div class="status-right">
			<div class="redis-key" ref="redis-key"></div>
			<div class="redis-journal">
				<header class="redis-journal-header">Redis实时日志(共 {{redisJournal.length}} 条)：</header>
				<ul class="redis-journal-list">
					<li class="redis-journal-detail" v-for="item in redisJournal">
						<div class="redis-journal-executeTime">{{item.executeTime}}</div>
						<div class="redis-journal-usedTime">{{item.usedTime}}</div>
						<div class="redis-journal-args">{{item.args}}</div>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script>
	import resize from 'vue-resize-directive';
	import { errorNotice } from 'common/js/dom';
	import { cloneObj, timeFilter } from 'common/js/util';
	import { redisMemEchart, redisKeyEchart } from 'common/js/echarts';
	import { getMem, getInfo, getKey } from 'api/RedisMonitor';
	
	const timeFormat = 'yyyy/MM/dd HH:mm:ss';
	
	export default {
		mounted() {
			setTimeout(() => {
				this._getMem();	
				this._getInfo();
				this._getKey();
				this.initOption();
			}, 20)
		},
		data() {
			return {
				redisInfo: [],
				redisJournal: []
			}
		},
		methods: {
			initKeyEchart(res) {
				let time = res[0].create_time;
				let fomatTime = timeFilter(new Date(time), 'HH:mm:ss');
				if(this.keyEchart === undefined) {
					this.keyTime = [fomatTime];
					this.keyEchart = echarts.init(this.$refs['redis-key']);	
					this.keyOption = {};
					this.keyData = [];
					res.map(item => {
						this.keyOption[item.db] = [item.keys];
						this.keyData.push({
							name: item.db,
				            type: 'line',
				            data: [item.keys]
						})
					})
					this.keyEchart.setOption(redisKeyEchart(this.keyTime, this.keyData));
				}else {
					if (this.keyTime.length >= 5) {
						this.keyTime.shift();
					}
					this.keyTime.push(fomatTime)
					res.map(item => {
						if (this.keyOption[item.db]) {
							this.keyOption[item.db].push(item.keys);
						}
						let index = this.keyData.findIndex(items => item.db === items.name);
						this.keyData[index].data = this.keyOption[item.db];
					})
					
					this.keyEchart.setOption({
						xAxis: {
							data: this.keyTime
						},
						series: this.keyData
					})
				}
			},
			initMemEchart(res) {
				let time = new Date(res.create_time);
				let valueTime = timeFilter(time, timeFormat);
				let data = {
					name: valueTime,
					value: [
						valueTime,
						Math.round(res.used_memory / 1024 / 1024)
					]
				}
				if(this.memEchart === undefined) {
					this.memEchart = echarts.init(this.$refs['redis-mem']);	
					this.memOption = [];
					let dateTime = time.getTime();
					for(let i = 49; i > 0; i--) {
						this.memOption.push({
							name: timeFilter(new Date(dateTime - (i + 1) * 2000), timeFormat),
							value: [
								timeFilter(new Date(dateTime - (i + 1) * 2000), timeFormat),
								Math.round(res.used_memory / 1024 / 1024)
							]
						});
					}
					this.memOption.push(data)
					this.memEchart.setOption(redisMemEchart(this.memOption));
				}else {
					this.memOption.shift();
					this.memOption.push(data);
					this.memEchart.setOption({
						series: [{
							data: this.memOption
						}]
					})
				}
				
			},
			initOption() {
				this.time = setInterval(() => {
					this._getMem();
					this._getKey();
					this._getInfo();
				}, 2000)
			},
			_getKey() {
				getKey()
					.then(res => {
						setTimeout(() => {
							this.initKeyEchart(res);
						}, 20)
					})
					.catch(res => {
						errorNotice(res.message);
					})
			},
			_getInfo() {
				getInfo()
					.then(res => {
						setTimeout(() => {
							this.redisInfo = res.infoList;
							this.redisJournal = res.logList || [];
						}, 20)
					})
					.catch(res => {
						errorNotice(res.message);
					})
			},
			_getMem() {
				getMem()
					.then(res => {
						setTimeout(() => {
							this.initMemEchart(res);
						}, 20)
					})
					.catch(res => {
						errorNotice(res.message);
					})
			}
		},
		beforeDestroy() {
			clearInterval(this.time);
		}
	}
</script>

<style scoped lang="scss">
	.redis-status {
		width: 100%;
		height: 100%;
		position: relative;
		.status-left {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 55%;
			.redis-mem {
				width: 100%;
				height: 55%;
			}
			.redis-info {
				width: 100%;
				height: 45%;
				position: relative;
				.redis-info-header {
					width: 100%;
					height: 30px;
					text-align: center;
					font-size: 20px;
					font-weight: 700;
					color: #464646;
				}
				.redis-info-list {
					position: absolute;
					left: 0;
					right: 0;
					top: 30px;
					bottom: 0;
					overflow: auto;
					.redis-info-detail {
						width: 100%;
						display: flex;
						align-items: center;
						border-bottom: 1px solid lightgray;
						.redis-info-key {
							flex: 0 0 200px;
						}
						.redis-info-value {
							flex: 1;
						}
					}
				}
			}
		}
		.status-right {
			position: absolute;
			top: 0;
			bottom: 0;
			left: 45%;
			right: 0;
			.redis-key {
				width: 100%;
				height: 55%;
			}
			.redis-journal {
				width: 100%;
				height: 45%;
				padding-left: 20px;
				position: relative;
				.redis-journal-header {
					width: 100%;
					height: 30px;
					text-align: center;
					font-size: 20px;
					font-weight: 700;
					color: #464646;
				}
				.redis-journal-list {
					position: absolute;
					left: 20px;
					right: 0;
					top: 30px;
					bottom: 0;
					overflow: auto;
					.redis-journal-detail {
						width: 100%;
						display: flex;
						align-items: center;
						border-bottom: 1px solid lightgray;
						.redis-journal-executeTime {
							flex: 0 0 100px;
						}
						.redis-journal-usedTime {
							flex: 0 0 100px;
						}
						.redis-journal-args {
							flex: 1;
						}
					}
				}
			}
		}
	}
</style>